<template>
	<div class="app-container foSi14">
		<div class="dis">
			<div>
				<div class="hei20 foSi13" style="color: #838383;">操作时间</div>
				<el-date-picker v-model="start_time" style="width: 140px" size="small" type="date"
					placeholder="开始时间" />
				<el-date-picker v-model="end_time" class="mar-left10" style="width: 140px;" size="small"
					type="date" placeholder="截至日期" />
			</div>
			<div class="mar-left10">
				<div class="foSi13" style="height: 20px;color: #838383;">业务模块</div>
				<el-select v-model="mode" style="width: 140px" size="small" placeholder="不指定" @change="modeChange">
					<el-option v-for="(item,index) in modulesList" :key="index" :label="item.title"
						:value="index" />
				</el-select>
			</div>
			<div class="mar-left10">
				<div class="foSi13" style="height: 20px;color: #838383;">操作类型</div>
				<el-select v-model="type" style="width: 140px" size="small" placeholder="不指定">
					<el-option v-for="(item,index) in typeList" :key="index" :label="item.title"
						:value="item.id" />
				</el-select>
			</div>
			<div class="mar-left10">
				<div class="foSi13" style="height: 20px;color: #838383;">操作人</div>
				<el-select v-model="people" style="width: 140px" size="small" placeholder="不指定">
					<el-option v-for="(item,index) in peopleList" :key="index" :label="item.name"
						:value="item.id" />
				</el-select>
			</div>
			<div style="margin-left: 10px">
				<div class="foSi13" style="height: 20px;color: #838383;">手机号</div>
				<el-input v-model="tel" size="small" style="width: 140px" placeholder="手机号" />
			</div>
			<div class="dis disAl" style="padding-top: 20px;">
				<el-button type="primary" size="small" @click.stop="getSousuo" class="mar-left10 bac6b7">搜索</el-button>
			</div>
		</div>
		<el-table class="mar-top20 wid100" key="table0" v-loading="listLoading" :data="list" stripe
			:row-style="{ background: '#f2f2f2' }">
			<div slot="empty" class="m-empty-box">
				<div class="mar" style="width: 168px;height: 180px;">
					<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
				</div>
				<div class="title">暂无数据</div>
			</div>
			<el-table-column label="操作人信息" width="250">
				<template slot-scope="scope">
					<span>{{ scope.row.staff_user }} {{ scope.row.staff_tel }}
					<br>{{ scope.row.createtime }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="type_text" label="操作类型" width="120" />
			<el-table-column prop="mode_text" label="模块" width="120" />
			<el-table-column  prop="content" label="操作详情" />
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
			@pagination="getList" />
	</div>
</template>

<script>
	// import fetchList from '@/api/article'
	import Pagination from '@/components/Pagination'
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		getOperlog,
		getFiclist,
		getPeopleList
	} from '@/api/system'
	export default {
		name: 'ArticleList',
		components: {
			Pagination
		},
		data() {
			return {
				list: null,
				total: 0,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 10
				},
				start_time: null,
				end_time: null,
				mode: 0,
				type: -1,
				people: -1,
				tel: null,
				modulesList: [{id: -1,title: '不指定'}],
				typeList: [{id: -1,title: '不指定'}],
				peopleList: [{id: -1,title: '不指定'}]
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '操作日志',
				url: '/system/operationLog',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
			this.getLists()
			this.getFiclist()
		},
		methods: {
			getLists(){
				getPeopleList().then(response => {
					const {
						data
					} = response
					var ass = [{id: -1,name: '不指定'}]
					this.peopleList = ass.concat(data)
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
			getFiclist(){
				getFiclist().then(response => {
					const {
						data
					} = response
					var ass = [{id: -1,title: '不指定'}]
					this.modulesList = ass.concat(data)
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
			modeChange(e){
				this.type = -1
				var ass = [{id: -1,title: '不指定'}]
				this.typeList = ass.concat(this.modulesList[this.mode].child)
			},
			getSousuo(){
				this.listQuery.page = 1
				this.getList()
			},
			getList() {
				this.listLoading = true
				getOperlog({
					'mode': this.modulesList[this.mode].id !== -1?this.modulesList[this.mode].id:'',
					'type': this.type !== -1?this.type:'',
					'staff_id': this.people !== -1?this.people:'',
					'tel': this.tel,
					'start_time': this.start_time,
					'end_time': this.end_time,
					'page': this.listQuery.page,
					'limit': this.listQuery.limit
				}).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.total = data.total
					this.list = data.data
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			}
		}
	}
</script>

<style scoped>
	.app-container {
		padding: 20px;
	}
</style>
